﻿<head>
    <style type="text/css">
        .ul.team-thumbs {
            width: 39px;
        }

        .ul.team-thumbs {
            height: 59px;
        }

        .ul.team-thumbs {
            height: 44px;
        }

        .ul.team-thumbs {
            width: 53px;
        }

        .ul.team-thumbs {
            width: 45px;
        }

        .ul.team-thumbs {
            height: 59px;
        }

        .ul.team-thumbs {
            height: 33px;
        }
    </style>
</head>
<div style="margin-top: 50px" class="container" ng-controller="teamCtrl" id="teamCtrl">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">Teams</h4>
        </div>
        <div class="panel-body">
            <div class="col-xs-12 col-md-10">
                <ul class="teams list-group" id="teamlist">
                    <li data-ng-repeat="team in teams | orderBy:'Title' " class="ul.team-thumbs list-group-item">
                        <div class="row">
                            <div class="col-xs-7 col-md-6">
                                <a id="team" href="#/Teams/{{team.id}}" class="ul.team-thumbs">
                                    <img class="hidden-xs"  src ="../../Images/team2.png" title="team" class="ul.team-thumbs" /></a>
                                <a id="teamtitle" href="#/Teams/{{team.id}}">{{team.title}}</a>
                            </div>
                            <div class="col-xs-3 col-md-2">
                                <i id="deletebutton" class="btn btn-primary glyphicon glyphicon-trash " title="Delete{{team.id}}" data-ng-click="DeleteTeam(team)">Delete</i>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="panel panel-default" id="AddTeamDiv">
        <div class="panel-heading">
            <h4 class="panel-title"><a title="Add Team" id="AddTeam" data-ng-click="toggleAddMode()">Add Team</a></h4>
        </div>
        <span data-ng-show="addMode">
            <div class="panel-body">

                <div class="col-xs-12 col-md-10">
                    <input type="text" data-ng-model="title" id="title" placeholder="Team Name" required />

                    <i id="AddNewButton" class="btn btn-primary glyphicon glyphicon-plus" title="Save" data-ng-click="AddTeam(title)">Save</i>
                </div>
            </div>
        </span>
    </div>
</div>

